<template>
  <div class="wrap">

    <div class="content-table">

      <div class="table">

        <div class="search">
          <user-check-box
            class="mgb20"
            v-model="queryParams.userIds"
            @change="getData"
            :filter-stop="true"
            :disdisabled="loading"
            @apiUserFinish="getData"></user-check-box>
          <diy-date v-model="queryParams.times" @change="getData()" :set-day-type="30"></diy-date>
        </div>
        <el-tabs v-model="queryParams.stockField" @tab-click="getData">
          <el-tab-pane :label="$t('shipment.oneStock')" :name="stockField.stockNum"></el-tab-pane>
          <el-tab-pane :label="$t('shipment.middleWarehouse')" :name="stockField.middleStockNum"></el-tab-pane>
          <el-tab-pane label="快出库存" :name="stockField.fullStockNum"></el-tab-pane>
        </el-tabs>
        <el-table
          :data="data"
          :border="true"
          v-loading="loading"
          stripe
          show-summary
          :summary-method="getSummaries"
          v-tableHeight="{bottomOffset: 50}"
          height="100px"
          ref="tableData"
        >
          <el-table-column
            prop="date"
            :label="$t('table.date')"
            align="center"
            min-width="100"
            fixed="left"
          >
          </el-table-column>

          <el-table-column
            v-for="item in weightRangeList"
            :key="item.rangeId"
            :prop="'detail' + item.rangeId"
            :label="item.weightName + (queryParams.stockField === stockField.middleStockNum ? `（${$t('箱')}）` : `（${$t('个')}）`)"
            align="center"
            min-width="150"
          >
            <template v-slot="{row}">
              <template v-if="row['detail' + item.rangeId]">
                <el-tooltip content="Top center" placement="top">
                  <template #content>
                    {{item.weightName}}: ≥{{row['detail' + item.rangeId].weight}}
                    <template v-if="row['detail' + item.rangeId].rangeType === 'weight'">
                      kg
                    </template>
                    <template v-else>
                      m³
                    </template>
                    ,
                    {{row['detail' + item.rangeId].price}}{{$t('common.currency')}}
                  </template>
                  <div>
                    <span class="font-red">{{row['detail' + item.rangeId].calNum}}</span>
                    /
                    <span>{{row['detail' + item.rangeId].totalNum}}</span>
                  </div>
                </el-tooltip>
              </template>
              <template v-else>
                -
              </template>
            </template>
          </el-table-column>


          <el-table-column
            :label="$t('总数量') + (queryParams.stockField === stockField.middleStockNum ? `（${$t('箱')}）` : `（${$t('个')}）`)"
            prop="sumFreeNum"
            align="center"
            min-width="120"
            fixed="right"
          >
            <template v-slot="{row}">
              <div>
                <span class="font-red">{{row.sumCalNum}}</span>
                /
                <span>{{row.sumTotalNum}}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.totalStorageCost')"
            prop="totalFee"
            align="center"
            min-width="120"
            fixed="right"
          ></el-table-column>
        </el-table>
        <div class="mgt10 f13">
          <div class="font-grey">
            {{$t('列表统计库存数量按/区分为：非免仓期数量 / 总数量（免仓期+非免仓期数量）')}}
          </div>
          <div class="font-red">
            {{$t('仓储费用根据非免仓期库存数量计算收取')}}
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {accountIndex, getIndex, getStorageStatistics} from "@/api/statistics";
import {dateFormat} from "@/utils/common";
import DiyDate from "@/views/statistics/components/DiyDate.vue";
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import {stockField} from "@/utils/stock";

export default {
  name: "storage",
  components: {UserCheckBox, DiyDate},
  computed:{

  },
  data(){
    return {
      queryParams:{
        page: 1,
        pageSize: 20,
        times: [], // 日期
        userIds: [-1], // 用户
        stockField: stockField.stockNum,
      },
      stockField,
      data: [],
      loading: false,
      total: 0,
      sumTotalFee: 0,
      weightRangeList: [], // 重量范围
      apiTimes: 0, // 用于刷新表格
    }
  },
  created() {

    const date = new Date()

    let endTime = dateFormat('yyyy-MM-dd',date)
    date.setDate(date.getDate() - 30)
    let startTime = dateFormat('yyyy-MM-dd',date)

    this.queryParams.times = [startTime,endTime]


  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods:{

    getData(){
      this.loading = true
      getStorageStatistics(this.queryParams)
        .then(res=>{
          this.loading = false
          this.data = res.data;
          this.weightRangeList = res.info.weightRangeList;
          this.apiTimes++;
        })
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t('table.sum');
          return;
        }
        if(index === (columns.length - 1)){
          sums[index] = data.reduce((prev, curr)=>{
            return prev + Number(curr.totalFee)
          },0)
          sums[index] = sums[index].toFixed(2)
        }else if(index === (columns.length -2)){
          let calNum = data.reduce((prev,curr)=>{
            return prev  + Number(curr.sumCalNum)
          },0)
          let sumTotalNum = data.reduce((prev,curr)=>{
            return prev  + Number(curr.sumTotalNum)
          },0)
          sums[index] = calNum + ' / ' + sumTotalNum
        }else{
          let calNum = data.reduce((prev,curr)=>{
            if(curr[column.property]){
              return prev  + Number(curr[column.property].calNum)
            }else{
              return prev
            }
          },0)
          let sumTotalNum = data.reduce((prev,curr)=>{
            if(curr[column.property]){
              return prev  + Number(curr[column.property].totalNum)
            }else{
              return prev
            }
          },0)
          sums[index] = calNum + ' / ' + sumTotalNum
        }
      });

      return sums;
    },

  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 10px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
.today-card{
  background: inherit;
  background-color: #4A89DC;
}
.yesterday-card{
  background: inherit;
  background-color: #5D9CEC;
}
.user-card{
  background: inherit;
  background-color: #3bafda;
}
.income-card{
  background: inherit;
  background-color: #7db1b1;
}
.header-card{
  color: #FFFFFF;
  font-size: 14px;
  height: 150px;
  .title{
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
  }
  .num{
    font-size: 36px;
    font-weight: 500;
    margin: 10px 0;
  }
  .item{
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 10px;
    .item-num{
      color: #FFCD00;
    }
  }
}
.content-table{
  margin-top: 20px;

  .table{
    .search{
      margin-bottom: 20px;
    }
  }
}
</style>
